<div style="width: 700px">
  <d-operable-tree
    #operableTree
    [tree]="data2"
    [iconParentOpen]="iconParentOpen"
    [iconParentClose]="iconParentClose"
    [iconLeaf]="iconLeaf"
    [iconTemplatePosition]="'after-checkbox'"
    [disableMouseEvent]="disableMouseEvent"
    [operatorAlign]="'end'"
  >
    <ng-template #iconTemplate let-node="node">
      <span [ngClass]="{ 'my-icon': node?.data?.type }" class="{{ node?.data?.type }}"></span>
    </ng-template>
    <ng-template #nodeTemplate let-node="node" let-completeNode="completeNode">
      <span *ngIf="!node?.editable" style="margin: 0 10px; cursor: pointer" (click)="activeNode(completeNode)">{{ node?.title }}</span>
      <span class="devui-tree-node__edit" *ngIf="node?.editable">
        <input [(ngModel)]="node.title" (blur)="onBlurEdit(node)" />
      </span>
    </ng-template>
    <ng-template #statusTemplate let-node="node">
      <d-badge [count]="27" status="common"> </d-badge>
    </ng-template>
    <ng-template #operatorTemplate let-optree let-node="node" let-addNode="addNode" let-editNode="editNode" let-deleteNode="deleteNode">
      <span class="op-icons icon icon-add" (click)="addNode($event, node)"></span>
      <span class="op-icons icon icon-edit" (click)="editNode($event, node)"></span>
      <span class="op-icons icon icon-close" (click)="deleteNode($event, node)"></span>
      <span
        class="op-icons icon icon-more-operate"
        dDropDown
        dDropDownToggle
        appendToBody
        [trigger]="'hover'"
        (toggleEvent)="onToggle($event, node)"
      >
        <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
          <li class="disabled" role="menuitem">
            <a class="devui-dropdown-item disabled">option 1</a>
          </li>
          <li role="menuitem"><a class="devui-dropdown-item">option 2</a></li>
          <li role="menuitem"><a class="devui-dropdown-item">option 3</a></li>
        </ul>
      </span>
    </ng-template>
  </d-operable-tree>
</div>
